<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>批量下载</title>
<style type="text/css">

</style>  
<script type="text/javascript">  
  function loadinit(){
  	var filenames=document.getElementsByTagName("span");
  	for(var i=0;i<filenames.length;i++){
  		var filename= filenames[i].innerText;
  		if(filename.length>16){
//   			alert(filename)
  			filename=filename.substring(0,9)+" ... "+filename.substring(filename.length-4,filename.length);
  			filenames[i].innerText=filename;
  		}
  	}
  }
  function cheked(obj){
	  	if(obj.src.substring(obj.src.lastIndexOf("/")+1,obj.src.length)=="mian.jpg"){
	  		obj.src=obj.src.replace("mian.jpg","cheked.jpg");
	  	}else{
	  		obj.src=obj.src.replace("cheked.jpg","mian.jpg");
	  	}
  }
  function allcheked(){
  	 var filenames=document.getElementsByTagName("img");
  	 for(var i=0;i<filenames.length;i++){
  	 	filenames[i].src=filenames[i].src.replace("mian.jpg","cheked.jpg");
  	 }
  }
  function invertcheked(){
  	 var filenames=document.getElementsByTagName("img");
  	 for(var i=0;i<filenames.length;i++){
  	 	cheked(filenames[i]);
  	 }
  }
  function downfile(){
  	  var str="";
  	  var filenames=document.getElementsByTagName("img");
  	  for(var i=0;i<filenames.length;i++){
  	  	if(filenames[i].src.substring(filenames[i].src.lastIndexOf("/")+1,filenames[i].src.length)=="cheked.jpg"){
  	  		str=str+filenames[i].getAttribute("value")+",";
  	  	}
  	  }
  	  if(str==""){
  	  	  alert("请选择下载的文件！");
  	  	  return;
  	  }
  	  str=encodeURI(encodeURI(str));
  	  window.location.href="processDownload?files="+str;
  } 
</script>  
</head>
<body onload="loadinit();">
	<h1>Uploadify Demo (文件批量下载例子)</h1>
    <div style="width: 800px;height: 400px;border: 1px gray solid;padding: 10px;">
					<table>
						<tr><!-- 第一行 -->
						<c:forEach items="${fileList}" var="f" varStatus="i">
							
							<c:if test="${(i.index+1)%5==0&&i.index!=0}">
								
									<td>
										<div style="width: 140px;margin-left: 10px;float: left;" align="center" >
							       		<img onclick="cheked(this);" src="img/mian.jpg" style="width: 140px;height: 50px;cursor: pointer;"></img>
							       		<span style="font-size: 12px;" name="filename" title="${f}">${f}</span>
							       		</div>
						       		</td>
								</tr>
								<tr>
							</c:if>
							<c:if test="${(i.index+1)%5!=0}">
									<td>
										<div style="width: 140px;margin-left: 10px;float: left;" align="center" >
							       		<img onclick="cheked(this);" src="img/mian.jpg" value="${f}" style="width: 140px;height: 50px;cursor: pointer;"></img>
							       		<span style="font-size: 12px;" name="filename" title="${f}">${f}</span>
							       		</div>
							       	</td>	
							</c:if>
							
								
								
			    	 			
						       	
			    	  </c:forEach>
					</table>
    				
    				

    </div> 
    <p>
<!--     	<a href="processDownload"> 全部下载</a> -->
<!--     	<a onclick="downfile();"> 全部下载</a> -->
		<input type="button" style="margin-left: 25px;margin-bottom: 8px;cursor: pointer;" onclick="allcheked();" value="全选">
		<input type="button" style="margin-left: 25px;margin-bottom: 8px;cursor: pointer;" onclick="invertcheked();" value="反选">
    	<input type="button" style="margin-left: 25px;margin-bottom: 8px;cursor: pointer;" onclick="downfile();" value="开始下载">
    </p>
</body>
</html>